<template>

  <view :class="$style.container">
    <view :class="$style.detail" class="flex flex-col">
      <!-- 联系人 -->
      <alarm-contacts style="margin-top: 20rpx;"></alarm-contacts>
      <!-- 消防隐患 -->
      <fire-hazard style="margin-top: 20rpx;"></fire-hazard>
      <!-- 图纸信息 -->
      <drawing-information style="margin-top: 20rpx;"></drawing-information>
      <!-- 建筑消防设施 -->
      <architecture-facilities style="margin-top: 20rpx;"></architecture-facilities>
    </view>

  </view>
</template>

<script setup lang='ts'>
import FireHazard from './fire-hazard/index.vue'
import AlarmContacts from './alarm-contacts/index.vue'
import ArchitectureFacilities from './architecture-facilities/index.vue'
import DrawingInformation from './drawing-information/index.vue'

</script>

<style lang='less' module>
.container {
  position: relative;
  width: 100vw;

  .detail {
    width: 100%;
    height: 100%;
    background: #f5f6f7;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    padding: 20rpx 30rpx;
  }

  .alert_state {
    margin-top: 20rpx;
  }

  .button {
    width: 40%;
    border-radius: 40rpx;
    color: #5678f4;
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    background: rgba(86, 120, 244, 0.1);
    &::after {
      border: 0;
    }
  }
}
</style>
